<template>
  <div>
    <div>
      单位名称：
      <el-input
        size="mini"
        class="cate_sel"
        v-model="unitName"
        @keyup.enter.native="searchFn(1)"
      ></el-input>
      <el-button type="primary" size="mini" @click="searchFn(1)"
        >查询</el-button
      >
    </div>
    <div class="tab_cont">
      <div style="max-height: 400px; overflow-y: auto">
        <el-table :data="unitList" ref="table" @row-dblclick="handleRowDbClick">
          <el-table-column type="selection" width="55">
            <template slot-scope="scope">
              <el-radio v-model="radio" :label="scope.$index"
                ><span></span
              ></el-radio>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(item, index) in tableColumn"
            :prop="item.key"
            :label="item.name"
            :key="index"
          >
          </el-table-column>
        </el-table>
        <div
          class="pagination-container"
          style="text-align: right; margin-top: 20px"
          v-if="totalPage"
        >
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalPage"
            @current-change="currentChange"
            @size-change="sizeChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <div style="text-align: right">
      <el-button type="primary" @click="submitFn">确定</el-button>
      <el-button @click="cancelFn">取消</el-button>
    </div>
  </div>
</template>

<script>
import { ApiRequest } from '@api/basePage';
import paginationMixin from './paginationMixin.js';
export default {
  components: {},
  mixins: [paginationMixin],
  data () {
    return {
      tableColumn: [
        { name: '计量单位代码', key: 'uuid' },
        { name: '计量单位名称', key: 'unitName' }
      ],
      apiObj: {
        // 查询spu
        getPagerByUnit: {
          url: '/sysback/product/collect/getPagerByUnit',
          type: 'post' // 接口请求类型
        }
      },
      unitList: [],
      loading: false,
      radio: -2,
      unitName: ''
    };
  },
  computed: {},
  created () {},
  methods: {
    searchFn (curPage) {
      if (curPage) {
        this.currentPage = curPage
      }
      let data = {
        unitName: this.unitName,
        nowPage: this.currentPage,
        pageShow: this.pageSize
      };

      ApiRequest(
        this.apiObj.getPagerByUnit.url,
        this.apiObj.getPagerByUnit.type,
        data,
        true
      ).then((res) => {
        if (res.retStatus === '1' && res.retData && res.retData.results) {
          this.unitList = res.retData.results;
          this.totalPage = res.retData.totalNum;
        }
      });
    },
    handleRowDbClick (row) {
      let unitVal = {
        unitUuid: row.uuid,
        unitName: row.unitName,
        unitNo: row.unitNo,
        decimalPlaces: row.decimalPlaces
      };
      this.$emit('submitConcat', unitVal);
      this.radio = -2;
    },
    submitFn () {
      if (this.radio == -2) {
        this.$message({
          type: 'error',
          message: '请选择计量单位！'
        });
        return;
      }

      let unitVal = {
        unitUuid: this.unitList[this.radio].uuid,
        unitName: this.unitList[this.radio].unitName,
        unitNo: this.unitList[this.radio].unitNo,
        decimalPlaces: this.unitList[this.radio].decimalPlaces
      };

      this.$emit('submitConcat', unitVal);
      this.radio = -2;
    }
  }
};
</script>
<style lang="less" scoped>
.cate_sel {
  width: 200px;
  margin-right: 20px;
}
.tab_cont {
  margin: 20px 0;
}
.sel_no {
  margin: 20px 0;
  margin-left: 13px;
}
/deep/ .has-gutter .el-checkbox {
  display: none;
}
</style>
